<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>
		<script src="assets/js/jquery.min.js"></script>
		<link rel="stylesheet" href="assets/plyr/plyr.css" />
	</head>
	<body>

		<button class="clickme" style="font-size:2em">Change media</button>
		<button class="clickme2" style="font-size:2em">Toggle Captions</button>

		<div class="player-container"></div>


		<script src="assets/plyr/plyr.min.js"></script>
		<script type="text/javascript">
			var player=null; // ensure global access later

			function getYoutubeId(url){
				// source: https://stackoverflow.com/a/8260383
				// TODO: Add other video providers as well, such as Vimeo.
				var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
				var match = url.match(regExp);
				return (match&&match[7].length==11)? match[7] : false;
			}

			function getPlyrHtml(videourl) {
				var videoId=getYoutubeId(videourl);
				// TODO: Adopt to other video providers as well, such as Vimeo.
				return '			<div class="plyr__video-embed" id="player"> \
				<iframe src="https://www.youtube.com/embed/'+videoId+'?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" \
					allowfullscreen \
					allowtransparency \
					allow="autoplay" \
				></iframe> \
			</div>';
			}

			$(function(){
				// get the fallback code
				$('.player-container').html(getPlyrHtml('https://www.youtube.com/watch?v=zECTqthONjo'));

				// sources:
				// https://stackoverflow.com/a/53682741
				// https://github.com/sampotts/plyr/blob/master/controls.md
				const controls = [
					//'play-large', // The large play button in the center
					//'restart', // Restart playback
					'rewind', // Rewind by the seek time (default 10 seconds)
					'play', // Play/pause playback
					'fast-forward', // Fast forward by the seek time (default 10 seconds)
					'progress', // The progress bar and scrubber for playback and buffering
					'current-time', // The current time of playback
					'duration', // The full duration of the media
					'mute', // Toggle mute
					'volume', // Volume control
					'captions', // Toggle captions
					'settings', // Settings menu
					//'pip', // Picture-in-picture (currently Safari only)
					//'airplay', // Airplay (currently Safari only)
					//'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
					'fullscreen' // Toggle fullscreen
				];
				player = new Plyr(
					document.getElementById('player'),
					{
						controls: controls
					}
				);
				player.captions.active = true;

				player.on('ready', event => {
					// detach events set by the stubborn listeners.js
					// source: https://stackoverflow.com/a/39026635
					document.querySelector("button[data-plyr='rewind']").outerHTML = document.querySelector("button[data-plyr='rewind']").outerHTML;
					document.querySelector("button[data-plyr='fast-forward']").outerHTML = document.querySelector("button[data-plyr='fast-forward']").outerHTML;

					$("button[data-plyr='rewind']").on( "click", function(){
						alert('You clicked rewind button!');
					});
					$("button[data-plyr='fast-forward']").on( "click", function(){
						alert('You clicked fast forward button!');
					});
				});
			});


			function changeVideo(videoUrl) {
				player.source = {
					type: 'video',
					sources: [
						{
							src: getYoutubeId(videoUrl),
							provider: 'youtube',
						},
					],
				};
			}

			$('.clickme').click(function(){
				changeVideo('https://www.youtube.com/watch?v=C0DPdy98e4c')
			});

			$('.clickme2').click(function(){
				player.toggleCaptions();
			});

		</script>
	</body>
</html>